import { defineComponent, PropType } from 'vue'
import { useConfigTheme } from '../../theme/src'
import BUTTON_STYLE, { BUTTON_INTERFACE } from './const'

export type pSize = 'mid' | 'small' | 'big'
export type MaybeArray<T> = T | T[]
export type Type =
  | 'default'
  | 'primary'
  | 'info'
  | 'success'
  | 'warning'
  | 'error'

export const buttonProps = {
  size: {
    type: String as PropType<pSize>,
    default: 'mid'
  },
  onClick: [Function, Array] as PropType<(e: MouseEvent) => void>,

  type: {
    type: String as PropType<Type>,
    default: 'default'
  },
  disabled: Boolean,
  loading: Boolean,
  style: String,
  rounded: Boolean,
  icon: String
} as const

const button = defineComponent({
  name: 'XNutton',
  props: buttonProps,
  setup() {
    const themeConfig = useConfigTheme()
    return {
      themeConfig
    }
  },
  render() {
    const { themeConfig, $slots, $props } = this

    return (
      <button
        class={[
          BUTTON_STYLE.BUTTON,
          BUTTON_STYLE[
            ('BUTTON_' + $props.size.toUpperCase()) as BUTTON_INTERFACE
          ],
          $props.rounded ? BUTTON_STYLE['BUTTON_ROUNDED'] : '',
          $props.disabled || $props.loading
            ? BUTTON_STYLE[
                ('BUTTON_' +
                  $props.type.toUpperCase() +
                  '_DISABLED') as BUTTON_INTERFACE
              ]
            : BUTTON_STYLE[
                ('BUTTON_' +
                  $props.type.toUpperCase() +
                  '_' +
                  themeConfig?.theme.value.toUpperCase()) as BUTTON_INTERFACE
              ],
          $props.loading ? 'animate-pulse' : ''
        ]}
        onClick={$props.onClick}
        disabled={$props.disabled || $props.loading}
        style={$props.style}
      >
        <span class={['inline-block', $props.loading ? 'animate-bounce' : '']}>
          {$slots.default?.()}
        </span>
      </button>
    )
  }
})

export default button
